<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<!DOCTYPE HTML>
<html>
	<head>
		<%@ include file="/common/include/title.jsp"%>
		<title>上传文件 - 培训机构</title>
		<!-- 上传头像 -->
		<link rel="stylesheet" type="text/css" href="${rootPath}/common/resource/webuploader/webuploader.css">
		<script type="text/javascript" src="${rootPath}/common/resource/webuploader/webuploader.js"></script>
	</head>
	<body>
		<%@ include file="/common/include/header.jsp"%>
		<div class="container">
			<div class="row">
				<div class="col-sm-8 col-sm-offset-1 main">
					<h2 class="col-sm-10 col-sm-offset-1 form-signin-heading text-center">上传文件</h2>
					
					<form id="form" class="form-horizontal" action="${rootPath}${url}">
						<input type="hidden" name="operType" value="${requestScope.operType}">
						
						<input type="hidden" name="relaId" value="${requestScope.relaId }">
						<input type="hidden" name="fileType" value="${requestScope.fileType }">
						<input type="hidden" name="fileRelaType" value="${requestScope.fileRelaType }">
						
						<div class="form-group">
							<label for="pubTimeStr" class="col-sm-3 control-label">名称:</label>
							<div class="col-sm-7">
								${requestScope.recName}
							</div> 
						</div>
						<div class="form-group">
							<label for="name" class="col-sm-3 control-label">${requestScope.name }:</label>
							<div class="col-sm-7">
								<!--dom结构部分-->
								<div id="uploader-demo">
								    <!--用来存放item-->
								    <div id="fileList" class="uploader-list"></div>
								    <div id="filePicker">选择文件</div>
								</div>
							</div>
						</div>
						<div class="form-group" id="info" style="display: none;">
							<label for="pubTimeStr" class="col-sm-3 control-label">服务器返回:</label>
							<div class="col-sm-7">
								<div id="info1" class="error_info">${info }</div>
							</div> 
						</div>
					</form>
				</div>
			</div>
		</div>
		<%@ include file="/common/include/footer.jsp" %>
		<script type="text/javascript">
			$(function(){
				$list = $("#fileList") ; 
				var thumbnailWidth = 100 ; 
				var thumbnailHeight = 100 ; 
				
				// 初始化Web Uploader
				var uploader = WebUploader.create({
				    // 选完文件后，是否自动上传。
				    auto: true,
				    // swf文件路径
				    swf: '${rootPath}/common/resource/webuploader/Uploader.swf',
				    // 文件接收服务端。
				    server: '${rootPath }${url}&operType=${requestScope.operType}&relaId=${requestScope.relaId}&fileType=${requestScope.fileType}&fileRelaType=${requestScope.fileRelaType}',
				    // 选择文件的按钮。可选。
				    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
				    pick: '#filePicker',
				    // 只允许选择图片文件。
				    /* accept: {
				        title: 'Images',
				        extensions: 'gif,jpg,jpeg,bmp,png',
				        mimeTypes: 'image/*'
				    } */
				});
				
				// 当有文件添加进来的时候
				uploader.on( 'fileQueued', function( file ) {
				    var $li = $(
				            '<div id="' + file.id + '" class="file-item thumbnail">' +
				                '<img>' +
				                '<div class="info">' + file.name + '</div>' +
				            '</div>'
				            ),
				        $img = $li.find('img');
		
		
				    // $list为容器jQuery实例
				    $list.append( $li );
		
				    // 创建缩略图
				    // 如果为非图片文件，可以不用调用此方法。
				    // thumbnailWidth x thumbnailHeight 为 100 x 100
				    uploader.makeThumb( file, function( error, src ) {
				        if ( error ) {
				            $img.replaceWith('<span>不能预览</span>');
				            return;
				        }
		
				        $img.attr( 'src', src );
				    }, thumbnailWidth, thumbnailHeight );
				});
				
				
				// 文件上传过程中创建进度条实时显示。
				uploader.on( 'uploadProgress', function( file, percentage ) {
				    var $li = $( '#'+file.id ),
				        $percent = $li.find('.progress span');
		
				    // 避免重复创建
				    if ( !$percent.length ) {
				        $percent = $('<p class="progress"><span></span></p>')
				                .appendTo( $li )
				                .find('span');
				    }
		
				    $percent.css( 'width', percentage * 100 + '%' );
				});
		
				// 文件上传成功，给item添加成功class, 用样式标记上传成功。
				uploader.on( 'uploadSuccess', function( file,response ) {
					if(response.code == '0')
					{
					    $( '#'+file.id ).addClass('upload-state-done');
					}else
					{
					 	var $li = $( '#'+file.id ),
					        $error = $li.find('div.error');
			
					    // 避免重复创建
					    if ( !$error.length ) {
					        $error = $('<div class="error"></div>').appendTo( $li );
					    }
					}
					$("#info1").html(response.info);
				    $("#info").show();
				});
		
				// 文件上传失败，显示上传出错。
				uploader.on( 'uploadError', function( file ) {
				    var $li = $( '#'+file.id ),
				        $error = $li.find('div.error');
		
				    // 避免重复创建
				    if ( !$error.length ) {
				        $error = $('<div class="error"></div>').appendTo( $li );
				    }
		
				    $error.text('上传失败');
				});
		
				// 完成上传完了，成功或者失败，先删除进度条。
				uploader.on( 'uploadComplete', function( file ) {
				    $( '#'+file.id ).find('.progress').remove();
				});
			});
		</script>
	</body>
</html>